<!--
 * @Description: watch进阶
 * @Author: ZhangHan
 * @Date: 2025-06-17 15:16:29
 * @LastEditTime: 2025-06-17 16:28:51
 * @LastEditors: ZhangHan
-->
<template>
  <div class="w-full h-full flex-col">
    <h2>watch进阶</h2>
    <div>
      <div>{{ num }}</div>
      <div>
        <ElButton @click="addNum">增加Num</ElButton>
      </div>
    </div>
    <div>数量：{{ info.number }}---价格:{{ info.price }}</div>
    <div>
      <ElButton @click="changeInfo">修改info</ElButton>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from "vue";
import { ElButton } from "element-plus";

const num = ref(0);
const info = reactive({
  number: 10,
  price: 100,
});

const { stop, pause, resume } = watch(
  [num, info],
  ([newnum, newinfo], [oldnum, oldinfo]) => {
    console.log(newnum, newinfo);
  }
);

const addNum = () => {
  num.value += 1;
  if (num.value === 10) {
    // 当不再需要此监听器时，调用stop 会直接销毁 调用resume无效
    // stop();
    // 暂停侦听器
    // pause();
  } else if (num.value >= 20) {
    // 稍后恢复
    // resume();
  }
};

const changeInfo = () => {
  info.number++;
  info.price += 10;
};
</script>
